<template>
  <view class="page">
    <view class="search-bar">
      <view class="search-input">
        <input type="text" v-model="keywords" placeholder="请输入标题/短信内容" />
        <image class="icon-search" src="/static/images/icon_search.png" mode=""></image>
        <view class="search-button" @click="search">搜索</view>
      </view>
    </view>
    <!-- <view class="search">
			<u-search placeholder="请输入任务名" v-model="keywords" height="80" @custom="search" @search="search"></u-search>
		</view> -->
    <scroll-view class="scroll-list" scroll-y="true" @scrolltolower="loadMore">
      <view class="card-list-title">
        请选择待办查询<view class="count">（已选{{selectedTaskIds.length}}个）</view>
        <view class="delete" @click="handleBatchDelete">删除</view>
      </view>
      <view class="card-list">
        <view v-for="(item, index) in list" :key="index" class="card-item" @click="selectionChange(item.id)">
          <view class="card-item-hd">
            <label class="radio" :class="item._checked ? 'checked' : ''"></label>
            <view class="card-title">{{item.subject || item.id}}</view>
          </view>
          <view class="card-item-bd">
            <view class="card-desc">工号：{{item.createdByIds}}</view>
            <view class="card-desc">时间：{{item.createdOn}}</view>
          </view>
        </view>
      </view>
      <!-- <view v-if="selectedTaskIds.length>0" style="flex-direction: row;">
        <u-button type="error" size="medium" @click="handleBatchDelete"
          style="width: 20rpx;margin-left: 10rpx;">删除</u-button>
        <u-button type="primary" size="medium" @click="handleClearAll" style="width: 20rpx;margin-left: 10rpx;">取消选择</u-button>
      </view> -->
      <!-- <checkbox-group @change="selectionChange">
        <view class="uni-list" v-for="(item, index) in list" :key="index" style="margin-top: 5rpx;">
          <u-swipe-action :options="options" :show="item.show" :key="index" :index="index" @click="optionsClick"
            @open="open">
            <u-cell-item :arrow="true">
              <checkbox slot="title" :value="item.id + ''">
                <text
                  style="word-break:break-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:bold">
                  {{item.subject || item.id}}
                </text>
              </checkbox>
              <view slot="label">
                <view style="margin-bottom: 10rpx;margin-top: 10rpx;">工号：{{item.createdByIds}}</view>
                <view>时间：{{item.createdOn}}</view>
              </view>
            </u-cell-item>
          </u-swipe-action>
        </view>
      </checkbox-group> -->
      <u-loadmore class="loadmore" :status="loadStatus"></u-loadmore>
    </scroll-view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        keywords: '',
        query: {
          current: 1,
          size: 20
        },
        list: [],
        count: 0,
        loadStatus: 'loadmore',
        options: []
      };
    },
    onLoad() {
      this.loadList();
      if (this.hasPermission('tctask_delete')) {
        this.options.push({
          text: '删除',
          style: {
            background: '#ff0000'
          },
          action: 'delete'
        });
      }
    },
    onShow() {

    },
    computed: {
      selectedTaskIds() {
        var list = this.list;
        var selectedTaskIds = [];
        for (var i = 0; i < list.length; i++) {
          const item = list[i];
          if (item._checked) {
            selectedTaskIds.push(item.id);
          }
        }
        return selectedTaskIds;
      }
    },
    methods: {
      loadMore() {
        this.loadStatus = "loading";
        setTimeout(() => {
          this.query.current += 1;
          this.loadList();
        }, 100);
      },
      loadList() {
        let self = this;
        this.$u.api.mis.tcTask.list(this.query).then(res => {
          if (!res.data || !res.data.records || res.data.records == 0) {
            self.loadStatus = "nomore";
            return;
          }
          self.list = self.list.concat(res.data.records);
          self.list.forEach((item) => {
            item.show = false;
          })
          self.count = res.total;
          self.query.current = res.data.current;
          self.query.size = res.data.size;
          self.loadStatus = "loadmore";
        });
      },
      optionsClick(rowIndex, btnIndex) {
        if (this.options[btnIndex].action == 'delete') {
          let self = this;
          uni.showModal({
            title: '提示',
            content: '确认要删除该数据吗？',
            showCancel: true,
            success: function(res2) {
              if (res2.confirm) {
                let row = self.list[rowIndex];
                self.$u.api.mis.tcTask.remove({
                  ids: row.id
                }).then(res => {
                  self.$u.toast(res.msg);
                  if (res.success) {
                    self.list.splice(rowIndex, 1);
                  }
                });
              }
            }
          });
        }
      },
      open(index) {
        this.list[index].show = true;
        this.list.map((val, idx) => {
          if (index != idx) this.list[idx].show = false;
        })
      },
      search(value) {
        this.list = [];
        this.query.current = 0;
        this.query.subject = value;
        this.loadList();
      },
      selectionChange(id) {
        var list = this.list;
        for (var i = 0; i < list.length; i++) {
          const item = list[i];
          if (item.id === id) {
            this.$set(item, '_checked', !item._checked)
          }
          //由于values数组中的类型是String，则id也需要为String类型
          // const id = item.id + "";
          // if (values.includes(id)) {
          //   //vm.$set响应式改变list的值
          //   this.$set(item, '_checked', true)
          // } else {
          //   this.$set(item, '_checked', false)
          // }
        }
      },
      handleClearAll() {
        this.list.forEach((item) => {
          item._checked = false;
        })
      },
      handleBatchDelete(index) {
        if (this.selectedTaskIds.length === 0) {
          this.$u.toast('请选择至少一条数据');
          return;
        }
        let self = this;
        uni.showModal({
          title: '提示',
          content: '确定将选择数据删除吗？',
          showCancel: true,
          success: function(res2) {
            if (res2.confirm) {
              self.$u.api.mis.tcTask.remove({
                ids: self.selectedTaskIds
              }).then(res => {
                self.$u.toast(res.msg);
                if (res.success) {
                  self.list = self.list.filter(ele => {
                    var taskId = ele.id;
                    return self.selectedTaskIds.indexOf(taskId) == -1;
                  });
                }
              });
            }
          }
        });
      }
    }
  };
</script>
<style lang="scss">
  .page {
    position: relative;
    background: #F7F7F7;
  }

  .search-bar {
    display: flex;
    align-items: center;
    padding: 16rpx 32rpx;
    background: #fff;
  }

  .search-input {
    position: relative;
    width: 100%;
    height: 64rpx;
    border-radius: 32rpx;
    background: #F7F7F7;
    overflow: hidden;

    input {
      width: 100%;
      height: 64rpx;
      border: 0;
      padding: 0 144rpx 0 64rpx;
      outline: 0;
      line-height: 64rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #999;
      background: transparent;
    }

    .icon-search {
      position: absolute;
      top: 21rpx;
      left: 21rpx;
      width: 22rpx;
      height: 22rpx;
    }

    .search-button {
      position: absolute;
      top: 0;
      right: 0;
      width: 144rpx;
      border-radius: 32rpx;
      line-height: 64rpx;
      text-align: center;
      font-size: 24rpx;
      font-weight: 700;
      color: #fff;
      background: #3989FC;
    }
  }

  .scroll-list {
    height: calc(100vh - var(--window-top) - var(--window-bottom) - 96rpx);

    .loadmore {
      padding: 32rpx;
    }
  }

  .card-list-title {
    display: flex;
    align-items: center;
    padding: 24rpx 24rpx 0;
    font-size: 32rpx;
    font-weight: 700;
    color: #333;

    .count {
      color: #3989FC;
    }

    .delete {
      display: inline-block;
      border-radius: 56rpx;
      padding: 0 28rpx;
      margin-left: auto;
      line-height: 56rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #fff;
      background: #D43030;
    }
  }

  .card-list {
    display: flex;
    flex-direction: column;
    padding: 24rpx 24rpx 0;
  }

  .card-item {
    width: 100%;
    border-radius: 8rpx;
    padding: 24rpx 32rpx;
    margin-bottom: 24rpx;
    background: #fff;
  }

  .card-item-hd {
    display: flex;
    align-items: center;
    margin-bottom: 24rpx;

    .radio {
      position: relative;
      display: inline-block;
      width: 30rpx;
      height: 30rpx;
      border: 1px solid #D8D8D8;
      border-radius: 50%;
      margin-right: 16rpx;

      &::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        width: 20rpx;
        height: 20rpx;
        border-radius: 50%;
        transform: translate(-50%, -50%);
      }

      &.checked::after {
        background: #3989FC;
      }
    }
  }

  .card-item-bd {
    padding-left: 46rpx;
  }

  .card-title {
    min-width: 0;
    font-size: 28rpx;
    font-weight: 500;
    color: #333;
  }

  .card-desc {
    font-size: 24rpx;
    font-weight: 500;
    color: #999;

    &+.card-desc {
      margin-top: 16rpx;
    }
  }
</style>